<template>
  <div>
    <div v-if="arrData.length > 0">
      <div
        class="bocd"
        v-for="(item,index) in arrData"
        :key="index"
        @click="showDetails(item)"
      >
        <section class="se-box">
          <div class="biaoti">提现{{item.cash_money}}元</div>
          <div class="time">{{item.create_time}}</div>
          <!-- <div class="shouyi">{{item.title}}{{item.commission_money}}元</div> -->
          <div class="yijlq">
            <div class="sishuju">已领取</div>
            <div class="qian">手续费-{{item.service_money}}</div>
          </div>
        </section>
      </div>
    </div>
    <div v-else>
      <div
        class="co_kong"
        v-if="arrData.length == 0"
      >
        <kong
          :type='co_kong'
          img='https://o6wndwjxn.qnssl.com/WechatIMG3.png'
        ></kong>
      </div>
    </div>
  </div>
</template>

<script>
import {
  mapState
} from 'vuex'
import { cashlogs, cashInfoLog } from '@/api/center'
import kong from '@/components/public/kong.vue'
export default {
  components: {
    kong
  },
  data () {
    return {
      arrData: [],
      co_kong: '任何数据'
    }
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  created () {
    this.getlist()
  },
  methods: {
    showDetails (item) {
      this.$router.push({
        path: '/mingxi',
        query: {
          info_id: item.info_id
        }
      })
    },
    getlist () {
      let obj = {
        app_id: this.app_id,
        member_id: this.user_id
      }
      cashInfoLog(obj).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        let { code, data } = res.data
        if (code === 200) {
          this.arrData = data
        }
        console.log(code)
      })
    }
  }
}
</script>

<style>
.qian {
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 28 / 750);
  color: #999999;
  margin-top: calc(100vw * 35 / 750);
}
.bocd {
  width: 100%;
  height: calc(100vw * 140 / 750);
  padding: calc(100vw * 20 / 750) calc(100vw * 30 / 750) 0 calc(100vw * 30 / 750);
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.fo-png {
  height: calc(100vw * 130 / 750);
  width: calc(100vw * 130 / 750);
  background-color: #f0f0f0;
  border-radius: 5px;
  margin-right: calc(100vw * 30 / 750);
}
.fo-png > img {
  width: 100%;
  height: 100%;
}
.time {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #999999;
  position: absolute;
  bottom: 0;
}
.type {
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #333333;
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 10px;
}
.money {
  position: absolute;
  right: calc(100vw * 30 / 750);
  font-family: PingFangSC-Semibold;
  font-size: calc(100vw * 36 / 750);
  color: #333333;
  top: 50%;
  transform: translate(0, -50%);
}
.se-box {
  flex: 1;
  height: 100%;
  position: relative;
}
.biaoti {
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 34 / 750);
  color: #333333;
}
.shouyi {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #999999;
  margin-top: 5px;
}
.yijlq {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #f56c6c;
  text-align: center;
  position: absolute;
  right: 0;
  top: 50%;
  height: 100%;
  text-align: right;
  transform: translate(0, -50%);
}
</style>
